<template>
  <div id="ChooseBooth">
    <div class="booth-layout-container">
      <div class="title">大厅入口</div>
      <div v-for="(item, index) in gridQuantity" :index="index" :style="gridBoxStyle" class="grid-box">
        <el-tooltip v-if="stallsMap[index]" placement="top" effect="light">
          <div slot="content">
            <div class="tooltip-box">
              {{stallsMap[index].stalls_name}}
            </div>
          </div>
          <div v-if="hasChoosedMap[index]" class="icon-box icon-used">
            <i class="fa fa-user-o"></i>
          </div>
          <div v-else class="icon-box" @click="activeGrid($event, index)">
            <i class="fa fa-check" style="color:#FFFFFF"></i>
          </div>
        </el-tooltip>
        <div v-else class="icon-box icon-display"></div>
      </div>
      <div style="width:100%;height:10px;"></div>
    </div>
    <div class="order-area">
      <div class="boothSchedule">
        <h3>查看摊位预定情况：</h3>
        <DatePicker :banListDay="banListDay" :limitField="limitField" @returnDate="returnDate"
                    :setTime="limitField.time"></DatePicker>
        <!-- 禁时间 -->
      </div>
      <div class="instruction">
        <p>选择说明：</p>
        <div class="instruction-item">
          <div class="icon-item"></div>
          可选摊位
        </div>
        <div class="instruction-item">
          <div class="icon-item icon-active">
            <i class="fa fa-check"></i>
          </div>
          已选摊位
        </div>
        <div class="instruction-item">
          <div class="icon-item icon-display"></div>
          禁用摊位
        </div>
        <div class="instruction-item">
          <div class="icon-item icon-used">
            <i class="fa fa-user-o"></i>
          </div>
          已售摊位
        </div>
      </div>

      <p>摊位：</p>
      <ul class="stalls-area">
        <li v-for="(orderitem,index) in orderList" :key="index">
          <span>{{orderitem.stalls_name}}</span><br>
          <span>开始时间：{{orderitem.schedule_date}}</span><br>
          <span>结束时间：{{orderitem.schedule_end_date}}</span>
        </li>
      </ul>
      <p>摊位数：<span>{{total}} 个</span></p>
      <p>总价：<span>￥{{sum}}.00 元</span></p>
      <el-button type="primary" size="large" :disabled="btnDisabled" @click="submitOrder">确认提交</el-button>
    </div>
    <el-dialog title="选择预订时间" size="tiny" :visible.sync="isEditStall">
      <el-form label-position="left" label-width="120px">
        <el-form-item label="开始时间" required>
          <!-- 开始时间 -->
          <DatePicker :banListDay="banListDay" :limitField="limitFieldStart" @returnDate="returnDateStart"
                      :setTime="limitFieldStart.time"></DatePicker>
        </el-form-item>
        <el-form-item label="结束时间" prop="end">
          <!-- 结束时间 -->
          <DatePicker :banListDay="banListDay" :limitField="limitFieldEnd" @returnDate="returnDateEnd"
                      :setTime="limitFieldStart.time"></DatePicker>
        </el-form-item>
        <el-form-item style="margin-left:30px;">
          <el-button type="primary" @click="saveTime">保存</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
  import { postDataToServer } from '../../assets/js/post.js'
  import { formatterTime } from '../../assets/js/common.js'
  import DatePicker from '@/components/common/DatePicker'

  export default {
    name: 'ChooseBooth',
    data () {
      return {
        currentIndex: 0,
        optionDate: '',
        startDate: '',
        endDate: '',
        total: 0,
        sum: 0,
        btnDisabled: true,
        isEditStall: false,
        gridX: 10,
        gridY: 10,
        gridQuantity: 0,
        gridBoxStyle: {
          width: '',
        },
        stallData: {
          stalls_name: '',
          stalls_url: '',
          coordinate_x: 0,
          coordinate_y: 0
        },
        stallList: [],
        stallsMap: {}, //所有可使用的摊位
        hasChoosedList: [],
        hasChoosedMap: {}, //已被预订的摊位
        orderList: [], //企业用户预订的摊位
        orderMap: {},
        stallTarget: {},
        banListDay: [],
        limitField: {
          type: 'before',
          time: '',
        },
        limitFieldStart: {
          type: 'before',
          time: '',
        },
        limitFieldEnd: {
          type: 'before',
          time: '',
        },
      }
    },
    mounted () {
      this.gridBoxStyle.width = (1 / this.gridX) * 100 + '%'
    },
    created () {
      this.gridQuantity = this.gridX * this.gridY
      this.optionDate = this.getDefaultTime()
      this.limitField.time = this.getDefaultTime()
      this.limitFieldStart.time = this.getDefaultTime()
      this.limitFieldEnd.time = this.getDefaultTime()
      this.getBanListTime()
      this.getStallsDataList()
    },
    methods: {
      returnDate (state) {
        this.limitFieldStart.time = state.returnDate
        this.optionDate = state.returnDate
      },
      returnDateStart (state) {
        this.limitFieldEnd.time = state.returnDate
        this.startDate = state.returnDate
      },
      returnDateEnd (state) {
        this.endDate = state.returnDate
        if (this.endDate < this.startDate) {
          this.$message({
            type: 'warning',
            message: '开始时间不能大于结束时间'
          })
        }
      },
      getBanListTime () {
        postDataToServer('HOLIDAY_LISTALL').then((data) => {
          if (data.status === 0) {
            this.banListDay = data.data_list
          } else {
            this.$message({
              type: 'warning',
              message: data.message
            })
          }
        })
      },
      //向服务器获取摊位列表
      getStallsDataList () {
        let _this = this
        let params = new Object()
        postDataToServer('STALLS_NET_LISTALL', params).then((data) => {
          if (data.status === 0) {
            _this.stallList = data.data_list
          }
        }).then(() => {
          this.constructAllStalls()
        }).then(() => {
          this.getUsedList()
        })
      },
      getUsedList () {
        let _this = this
        let params = new Object()
        params.date_schedule = _this.optionDate
        postDataToServer('STALLS_SCHEDULE_DAY_LISTALL', params)
          .then((data) => {
            if (data.status === 0) {
              _this.hasChoosedList = data.data_list
            }
          }).then(() => {
          this.constructUsedStalls()
        })
      },
      constructAllStalls () {
        let _index = 0
        let _this = this
        this.stallsMap = {}
        this.stallList.map(function (item, index) {
          _index = item.coordinate_y * _this.gridX + item.coordinate_x
          _this.stallsMap[_index] = item
        })
      },
      constructUsedStalls () {
        let _index = 0
        let _this = this
        this.hasChoosedMap = {}
        this.hasChoosedList.map(function (item, index) {
          _index = item.coordinate_y * _this.gridX + item.coordinate_x
          _this.hasChoosedMap[_index] = item
        })
      },
      activeGrid (event, index) {
        this.startDate = this.optionDate
        this.stallTarget = event.currentTarget
        this.currentIndex = index
        if (event.currentTarget.className === 'icon-box el-tooltip') {
          if (this.total > 0) {
            this.$message({
              type: 'warning',
              message: '最多只能选择一个摊位'
            })
            return
          }
          this.isEditStall = true
        } else if (event.currentTarget.className === 'icon-box icon-active el-tooltip') {
          event.currentTarget.className = 'icon-box el-tooltip'
          this.deleteStall(index)
        }
      },
      saveTime () {
        if (this.startDate === '') {
          this.startDate = this.getDefaultTime()
        }
        if (this.endDate === '') {
          this.endDate = this.startDate
        }
        this.stallTarget.className = 'icon-box icon-active el-tooltip'
        let index = this.currentIndex
        this.stallsMap[index].schedule_date = this.getNowFormatDate(this.startDate)
        this.stallsMap[index].schedule_end_date = this.getNowFormatDate(this.endDate)
        this.orderList.push(this.stallsMap[index])
        this.startDate = ''
        this.endDate = ''
        this.isEditStall = false
        this.btnDisabled = false
        this.total++
      },
      deleteStall (index) {
        let _index = this.orderList.indexOf(this.stallsMap[index])
        if (_index > -1) {
          this.orderList.splice(_index, 1)
        }
        if (this.total > 0) {
          this.total--
        }
      },
      submitOrder () {
        let _this = this
        let param = new Object()
        param.stalls_id = _this.orderList[0].id
        param.date_schedule = _this.orderList[0].schedule_date
        param.date_schedule_end = _this.orderList[0].schedule_end_date
        postDataToServer('STALLS_SCHEDULE_ADD', param).then((data) => {
          if (data.status === 0) {
            this.$emit('returnStep', 1)
            this.$emit('returnData', data.data_list)
          } else {
            this.$message({
              type: 'error',
              message: data.message
            })
          }
        }).catch((error) => {
          this.$message({
            type: 'error',
            message: '提交订单失败'
          })
        })
      },
      getNowFormatDate (time) {
        var date = new Date(time)
        var seperator1 = '-'
        var seperator2 = ':'
        var month = date.getMonth() + 1
        var strDate = date.getDate()
        if (month >= 1 && month <= 9) {
          month = '0' + month
        }
        if (strDate >= 0 && strDate <= 9) {
          strDate = '0' + strDate
        }
        var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate
        return currentdate
      },
      getDefaultTime () {
        var day = new Date()
        day.setTime(day.getTime() + 24 * 60 * 60 * 1000)
        var month = day.getMonth() + 1
        var strDate = day.getDate()
        if (month >= 1 && month <= 9) {
          month = '0' + month
        }
        if (strDate >= 0 && strDate <= 9) {
          strDate = '0' + strDate
        }
        return day.getFullYear() + '-' + month + '-' + strDate
      }
    },
    watch: {
      optionDate (val, oldVal) {
        this.limitFieldStart.time = this.optionDate
        this.startDate = this.optionDate
        this.getUsedList()
      }
    },
    components: {
      DatePicker
    }
  }
</script>

<style scoped>
  .title {
    width: 100%;
    opacity: 0.8;
    color: #999;
    font-size: 20px;
    text-shadow: 3px 5px 10px #DADADA;
    letter-spacing: 0.3em;
    text-align: center;
    padding: 0.5em 0em 1em;
  }

  /*右侧确认订单详情*/
  .order-area {
    width: 25%;
    float: right;
    margin-left: 1em;
  }

  .boothSchedule {
    margin-bottom: 1em;
  }

  .boothSchedule h3 {
    margin: 10px auto;
    color: #333;
  }

  .stalls-area {
    min-height: 50px;
    max-height: 170px;
    overflow-x: hidden;
  }

  .order-area li {
    list-style: none;
    margin-left: 15px;
    padding: 5px;
  }

  .order-area p {
    margin: 10px 0px;
    font-size: 1.1em;
    color: #999999;
  }

  .order-area p span {
    font-size: 1.2em;
    color: #FF5A01;
  }

  .order-area button {
    width: 80%;
    margin: 1em auto;
  }

  /*选择摊位布局*/
  .booth-layout-container {
    font-size: 0;
    width: 70%;
    float: left;
    text-align: center;
    border: 1px solid #bfcbd9;
    background: #FAFAFA;
  }

  .grid-box {
    display: inline-block;
    font-size: 10px;
    position: relative;
    vertical-align: middle;
  }

  .grid-box:before {
    content: "";
    display: inline-block;
    padding-bottom: 60%;
    width: .1px;
    vertical-align: middle;
  }

  .grid-box:hover {
    cursor: pointer;
  }

  .grid-box .icon-box {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    font-size: 1.8em;
    width: 50%;
    height: 50%;
    border: 1px solid #bfcbd9;
    border-radius: 5px;
  }

  .grid-box .icon-box:before {
    content: "";
    display: inline-block;
    padding-bottom: 90%;
    width: .1px;
    vertical-align: middle;
  }

  .icon-active {
    background: #13ce66;
    color: white;
  }

  .icon-used {
    background: red;
    color: #FFFFFF;
  }

  .icon-display {
    background: #B7B7B7;
    cursor: no-drop;
  }

  /*说明*/
  .instruction-item {
    width: 50%;
    float: left;
    font-size: 0.9em;
    text-align: center;
    line-height: 25px;
    margin: 5px 0px;
  }

  .icon-item {
    width: 26px;
    height: 25px;
    float: left;
    border: 1px solid #bfcbd9;
    border-radius: 5px;
  }
</style>
